<template>
  <div class="container">
    <van-nav-bar
      title="歌单"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>

    <!-- header -->
    <div class="header pad" v-if="songList[0]">
      <div class="headerImg">
        <img :src="songList[0].al.picUrl" alt="" width="100%" />
      </div>
      <div class="content">
        <p>{{ $route.query.name }}</p>
        <p>编辑简介<van-icon name="arrow" /></p>
      </div>
    </div>

    <!-- 歌曲列表 -->
    <div class="songList pad">
      <div class="header">
        <div class="left">
          <van-icon name="play-circle" />
          <span>播放全部({{songList.length}})</span>
        </div>
        <div class="right">
          <van-icon class="mar" name="warning-o" />
          <van-icon  name="certificate" />
        </div>
      </div>
      <ul class="list">
        <li class="listItem" v-for="(item,index) in songList" :key="item.id" @click="goSongDetail(item.id,index)">
          <span>{{index + 1}}</span>
          <div class="songInfo">
            <p>{{item.name}}</p>
            <span><van-icon name="like" class="xing" />{{item.ar[0].name}}-{{item.al.name}}</span>
          </div>
          <div class="right">
            <van-icon name="play-circle-o" />
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getSongDetail } from "@/request/api";
export default {
  data() {
    return {
      musicId: [],
      songList: [],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    //歌曲详情
    async getSongDetail() {
      this.musicId = this.trackIds.map((item) => {
        return item.id;
      });
      const { data: res } = await getSongDetail({ ids: this.musicId.join() });
      console.log(res);
      if (res.code !== 200) return this.$toast("请求失败");
      this.songList = res.songs;
    },
    // 跳转到歌曲详情
    goSongDetail(id,index){
      this.$router.push({
        name:'SongDetail',
        query:{id,index}
      })
    }
  },
  computed: {
    ...mapState(["trackIds"]),
  },
  created() {
    this.getSongDetail();
    // console.log(this.trackIds);
  },
};
</script>

<style lang="less" scoped>
.pad {
  padding: 0 3%;
}
.header {
  display: flex;
  align-items: center;
  // background-color: #ccc;
  height: 180px;
  .headerImg {
    width: 140px;
    // background-color: red;
    border-radius: 15px;
    img {
      border-radius: 15px;
    }
  }
  .content {
    display: flex;
    height: 100px;
    // background-color: aqua;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 15px;
    p {
      font-size: 17px;
      &:last-child {
        color: rgb(167, 165, 165);
        font-size: 15px;
      }
    }
  }
}
.songList{
  .van-icon{
    font-size: 25px;
  }
  .header{
    display: flex;
    justify-content: space-between;
    height: 80px;
    // background-color: aliceblue;
    font-size: 19px;
    .left{
      span{
        margin-left: 10px;
      }
    }
    .right{
      .mar{
        margin-right: 10px;
      }
    }
  }
  .list{
    .listItem{
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 70px;
      // background-color: antiquewhite;
      margin-bottom: 10px;
      .songInfo{
        flex: 1;
        margin-left: 10px;
        .xing{
          color: red;
          font-size: 12px;
          
        }
      }

    }
  }
}
</style>